<template>
  <div class="box">
    <van-nav-bar
      title="搜索页"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      class="navBar"
    />
    <div class="top">
      <input
        type="text"
        placeholder="甲流"
        @input="getSearch"
        v-model="searchValue"
      /><button @click="search">搜索</button>
    </div>
    <div class="searchData">
      <div v-for="(item, index) in searchData" :key="index">
        <img :src="item.item.cy_redirect" alt="" />
        <span>
<<<<<<< HEAD
          <!-- <img src="../../assets/images/放大镜.png" alt="" /> -->
=======
          <img src="../../assets/images/放大镜.png" alt="" />
>>>>>>> refs/remotes/origin/master
          {{ item.item }}
        </span>
      </div>
    </div>
    <div class="box1" v-show="searchData.length == 0">
      <div class="history" v-show="historyList.length > 0">
        <div class="historyTitle">
          <h2>历史搜索</h2>
          <span @click="clearHistory">清空</span>
        </div>
        <div class="historyList">
          <span v-for="(item, index) in historyList" :key="index">{{
            item
          }}</span>
        </div>
      </div>
      <div class="searchHot">
        <div class="hotTitle">
          <h2>热门搜索</h2>
        </div>
        <div class="HtoList">
          <span class="span" v-for="(item, index) in resou" :key="index">
            <a :href="item.url">
              <span>{{ item.recommend_word }}</span>
            </a>
          </span>
        </div>
        <div class="tu">
          <a :href="ad.url">
            <img :src="ad.image" alt="" />
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue'
const historyList = ref(JSON.parse(localStorage.getItem('history')) || [])
import { getrs, getshi } from '../../request/http'
const resou = ref([])
const ad = ref([])
const searchValue = ref('')
// 搜索列表
const searchData = ref([])

// 返回上一个页面
const onClickLeft = () => history.back()

// 获取热搜
getrs().then(res => {
  console.log(res)
  resou.value = res.data.data.hot_search_words
  ad.value = res.data.data.ad
})
const search = () => {
  historyList.value.unshift(searchValue.value)

  getshi(searchValue.value).then(res => {
    console.log(res)
    searchData.value = res.data.data.slice(1, res.data.data.length)
    console.log(searchData.value)
  })
  searchValue.value = ''
  localStorage.setItem('history', JSON.stringify(historyList.value))
}
const getSearch = () => {
  getshi(searchValue.value).then(res => {
    console.log(res)
    searchData.value = res.data.data.slice(1, res.data.data.length)
    console.log(searchData.value)
  })
}

// 清空历史记录
const clearHistory = () => {
  historyList.value = []
  localStorage.removeItem('history')
}
</script>

<style scoped>    
.box {
  width: 100%;
  height: 100vh;
  padding: 10px;
}
.top {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin-top: 40px;
}
.top input {
<<<<<<< HEAD
  width: 90%;
  height: 40px;
  border: rgb(15, 226, 15) 1px solid;
=======
  width: 80%;
  height: 40px;
  border: green 1px solid;
>>>>>>> refs/remotes/origin/master
  border-radius: 20px;
  padding-left: 10px;
}
.top button {
  width: 15%;
  height: 40px;
  border: none;
  color: #999;
  background: white;
}
.history {
  width: 100%;
  margin-bottom: 15px;
}
.historyList span {
  padding: 9px;
  background: #ccc;
  margin: 5px;
  display: inline-block;
  border-radius: 30px;
  font-size: 15px;
}
.historyTitle {
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
.searchHot {
  width: 100%;
  height: 100px;
  /* margin-top: 30px; */
}
.span {
  padding: 9px;
  background: #F7F7F7;
  margin: 5px;
  display: inline-block;
  border-radius: 30px;
  font-size: 15px;
}
.span a {
  text-decoration: none;
}
.hotTitle {
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
.tu {
  width: 96%;
  height: 100px;
  margin: 0 auto;
  margin-top: 10px;
}
.tu img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.searchData {
  width: 96%;
  margin: 0 auto;
  margin-top: 10px;
}
.searchData span {
  width: 100%;
  height: 35px;
  display: inline-block;
  border-bottom: #ccc 1px solid;
  line-height: 35px;
  display: flex;
}
.searchData span img {
  width: 30px;
  height: 30px;
  margin: 5px;
}
.navBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
</style>